<!--hmc 创建用户旅程第一步：设置规则-->
<template>
  <div class="page-container page-container-create">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>折扣卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>扣卡列表</el-breadcrumb-item>
        <el-breadcrumb-item>查看折扣卡规则</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div >
      <p class="title t_l mb50 mt40">查看折扣卡规则</p>
      <el-form class="mb60">
        <el-form-item  class="mb30">
          <span class="color333 font14 turnInlineBlock w84 t_r">折扣卡名称：</span>
          <span class="value font14 color333">{{ruleForm.discountThemeName}}</span>
        </el-form-item>

        <el-form-item class="mb30">
          <span class="color333 font14 turnInlineBlock w84 t_r">折扣限制：</span>
          <span class="value font14 color333">{{ruleForm.discountValue}}</span>
        </el-form-item>

        <el-form-item class="mb30">
            <span class="font14 color333 turnInlineBlock w84 t_r">有效期：</span>
            <span class="value font14 color333">{{ruleForm.startTime}}至{{ruleForm.endTime}}</span>
        </el-form-item>

        <el-form-item class="mb30" >
          <span class="font14 color333 turnInlineBlock w84 t_r">使用渠道：</span>
          <span class="value font14 color333">{{getChannelNames()}}</span>
        </el-form-item>

        <el-form-item  class="mb30">
          <span class="font14 color333 turnInlineBlock w84 t_r">备注：</span>
          <span class="value font14 color333 ">{{ruleForm.remark}}</span>
        </el-form-item>

      </el-form>
      <div class="t_c">
        <el-button class="searchButton" @click="back()">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import marketRequest from "@/discountCard/request/cardRequest";
  export default {
    name: "discountCardDetail",
    components: {},
    computed: {
      mainTabs: {
        get() {
          return this.$store.state.tab.mainTabs;
        },
        set(val) {
          this.$store.commit("updateMainTabs", val);
        }
      },
      mainTabsActiveName: {
        get() {
          return this.$store.state.tab.mainTabsActiveName;
        },
        set(val) {
          this.$store.commit("updateMainTabsActiveName", val);
        }
      }
    },
    data() {
      return {
        id: this.$route.params.id,
        deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
        //form
        ruleForm: {
          discountThemeName: null,  //折扣卡主题名称
          discountValue: null,  //折扣卡主题名称
          startTime: null,  //折扣卡主题名称
          endTime: null,  //折扣卡主题名称
          remark: null,  //折扣卡主题名称
          deptId: null,  //折扣卡主题名称
        },
        //渠道Tree List
        channelList: [{ childName: "卡奥斯运营中心", id: "179",deptId: '179'}],
        channlProps: {
          children: "children",
          label: "childName"
        },

      };
    },

    methods: {

      getChannelName(code) {
        let item = this.channelList.find(function (item, index) {
          return item.id == code;
        })
        return typeof(item)=="undefined" ? "" : item.childName;
      },

      getChannelNames(){
        let channelNames = [];
        let channels;

        if( this.ruleForm.channelCodes != undefined){
          channels = this.ruleForm.channelCodes.split(',')
          if (this.ruleForm.deptId == 179) {
            if(channels.indexOf('179') == -1){
              channels.unshift('179');
            }
          }
          channels.forEach(item=>{
            let channelName = this.getChannelName(item);
            if(channelName != ""){
              channelNames.push(channelName);
            }
          });
        }
        return  channelNames.join(" | ");
      },

      // tabs, 删除tab
      removeTabHandle(tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            let tab = this.mainTabs[this.mainTabs.length - 1];
            this.$router.push(
              { path: tab.path,params: tab.params, query: tab.query},
              () => {
                this.mainTabsActiveName = this.$route.name;
              }
            );
          }
        } else {
          this.$router.push("/");
        }
      },

      // 点击取消返回用户旅程列表
      back() {
        this.removeTabHandle("查看折扣卡规则");
      },

      //获取旅程基本信息
      getDiscountThemeInfo(){
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.ruleForm.discountThemeName =  res.data.discountThemeName;
            this_.ruleForm.discountValue =  res.data.discountValue;
            this_.ruleForm.remark =  res.data.remark;
            this_.ruleForm.startTime =  res.data.startTime;
            this_.ruleForm.endTime =  res.data.endTime;
            this_.ruleForm.channelCodes =  res.data.channelCodes;
            this_.ruleForm.deptId =  res.data.deptId;
          }
        };
        if(this.id){
          this.ruleForm.id = this.id;
        }
        marketRequest.queryDiscountThemeInfo({id: this.id}, callback)
      },

      //获取子平台列表
      getChildList() {
        let this_ = this;
        let channel = { childName: "卡奥斯运营中心", id: "179" ,disabled: true};
        this.utils.request.queryChildList({}, res => {
          if (res.code == "0000" && res.data && res.data.length > 0) {
            res.data.forEach(item=>{
              this_.channelList.push(item);
            })
          }
        });
      },

    },

    created(){
        this.getChildList();
    },

    mounted() {
      if (typeof this.$route.params.id != "undefined") {
        this.id = this.$route.params.id;
        this.getDiscountThemeInfo();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .desc{
    color: #ffb100;
    font-size: 10px;
    margin-top: 10px;
  }

  .title {
    font-size: 16px;
    text-align: left;
  }
  .part {
    padding: 0 40px;
  }
  /deep/ .el-radio {
    margin-right: 80px;
    position: relative;
    .icon {
      background: #ffbf5e;
      color: #fff;
      width: 10px;
      height: 10px;
      line-height: 10px;
      padding: 2px;
      border-radius: 50%;
      font-size: 10px;
      text-align: center;
      display: block;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .mb50{
    margin-bottom: 50px;
  }
  .mt40{
    margin-top: 40px;
  }
  /deep/ .w410{
    width: 410px;
    .el-input__inner{
      width: 410px;
    }
  }
  .mb120{
    margin-bottom: 120px;
  }
  /deep/ .el-tooltip__popper .is-dark {
    font-size: 20px !important;
  }
  /* 错误提示样式重置 */
  /deep/ .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 90px;
  }
  .w84{
    width:118px;
  }
  .special-wrap /deep/ .el-form-item__content {
    display: flex;
    .special {
      flex: 1;
      line-height: 20px;
    }
  }
  
</style>

